<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4" >
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       //准备数据
      
      


        // 指定图表的配置项和数据
        var option = {
        	dataset:{
        		source:[
        		['product','第一季度','第二季度','第三季度','第四季度'],
        		['按摩椅',54400,24800,110400,83200],
        		['跑步机',864600,264000,132000,2156001],
        		['微波炉',32500,47000,105000,14500],
        		['显示器',79500,367500,409500,444000],
        		['液晶电视',1205000,125000,550000,315000],
        		]
        	},
        	tooltip:{
        		confine:'True',
        		trigger:'axis',
        		axisPointer:{
        			type:'shadow',
        		},
        	},
        	legend:{
        		orient:'horizontal',
        		x:'center',
        		top:'8%',
        		textStyle:{color:'white',fontSize:'10'},
        		data:['第一季度','第二季度','第三季度','第四季度']
        	},
        	toolbox:{
        		show:true,
        		orient:'vertical',
        		top:'center',
        		feature:{
        			mark:{show:true},
        			magicType:{show:true,type:['line','bar','stack','tiled']},
        			restore:{show:true},
        			saveAsImage:{show:true}
        			
        		}
        	},
        	calculable:true,
        	xAxis:[{
        		type:'category',
        		axisTick:{
        		alignWithLabel:true,
        		},
        	}
        	],
        	yAxis:[
        	{
        		name:'金额（元）',
        		nameTextStyle:{
        			color:'65ABE7',
        			fontSize:12,
        		},
        		type:'value',
        		splitArea:{show:true}
        	}
        	],
        	axisLabel:{color:'white'},
        	grid:{x:"15%"},
        	series:[{
        		name:'第一季度',
        		type:'bar',
        		stack:'总量',
        	},{
        		name:'第二季度',
        		type:'bar',
        		stack:'总量',
        	},{
        		name:'第三季度',
        		type:'bar',
        		stack:'总量',
        	},{
        		name:'第四季度',
        		type:'bar',
        		stack:'总量'
        	},
        	]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>